<template>
	<view style="padding-bottom: 60rpx;">
		<view class="banner">
			<up-image :src="product.images" width="100%" mode="widthFix" bgColor="none"></up-image>
		</view>
		<view class="gift-pack">
			<view class="pack-name">
				{{ product.name }}
			</view>
			<view class="prices">
				<text class="prices-unit">价值：￥</text>
				<text class="prices-money">{{ product.prices }}</text>
			</view>
		</view>
		<up-card :show-head="false" :show-foot="false">
			<template #body>
				<view>产品说明</view>
				<view class="recharge-content">
					<rich-text :nodes="product.content"></rich-text>
				</view>
			</template>
		</up-card>
	</view>
	<view class="footer" v-if="isOrder">
		<up-button type="primary" text="立即激活" shape="circle" @tap="payment"></up-button>
	</view>
</template>

<script setup>
	import {
		ref
	} from 'vue';
	import {
		onShow
	} from "@dcloudio/uni-app"
	import {
		getQuery
	} from '../../utils/common';
	import {
		orderDetail,
		productDetail
	} from '../../utils/api/api';

	const product = ref({})
	// const order = ref()
	const isOrder = ref(false)
	const orderIts = ref({})
	onShow(() => {
		const opt = getQuery()
		const id = opt.options.id
		const order = opt.options.order
		if (id) {
			isOrder.value = false
			productDetail(id).then(res => {
				product.value = res.result
			})
		}
		if(order){
			isOrder.value = true
			orderDetail(order).then((res)=>{
				// console.log(res)
				product.value = res.result.productData
				product.value.prices = res.result.price
				orderIts.value = res.result
			})
		}
	})
</script>

<style lang="scss">
	.banner {
		// width: 100vw;
		box-sizing: border-box;
		padding: 30rpx;

		// padding: 15px;
		.u-image__image {
			// width: 100% !important;
		}
	}

	.gift-pack {
		margin: 0 30rpx;
		line-height: 1.75;

		.pack-name {
			font-weight: 600;
			font-size: 1.15rem;
		}
	}

	.product-lst {
		margin-top: 30rpx;

		.product-items {
			display: flex;
			align-items: center;
			justify-content: space-between;
			font-weight: 600;
			line-height: 1.75;

			.product-prices {
				color: #ceccce;
			}
		}
	}

	.recharge-content {
		line-height: 1.75;
		text-align: justify;
		font-size: .8rem;
	}

	.footer {
		position: fixed;
		box-sizing: border-box;
		padding: 30rpx;
		left: 0;
		right: 0;
		bottom: 0;
		background-color: #fff;
		display: flex;
		align-items: center;
		justify-content: space-between;

		.recharg-btn {
			flex-basis: 120px;
		}
	}

	.show-accounts {
		box-sizing: border-box;
		padding: 30rpx 30rpx 60rpx;

		.show-account-its {
			margin-bottom: 30rpx;

			.show-accounts-title {
				margin-bottom: 30rpx;
				color: #ceccce;
			}
		}

	}
	.footer{
		position: fixed;
		bottom: 0;
		left: 0;
		right: 0;
	}
</style>